<template>
  <div class="notifications-container">
    <van-nav-bar
      title="消息通知"
      left-arrow
      @click-left="onClickLeft"
    />

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div v-if="notifications.length === 0" class="empty-state">
          <van-empty description="暂无消息通知" />
        </div>
        
        <div v-else class="notification-list">
          <div
            v-for="notification in notifications"
            :key="notification.id"
            class="notification-item"
            @click="onNotificationClick(notification)"
          >
            <div class="notification-content">
              <div class="notification-title">{{ notification.title }}</div>
              <div class="notification-message">{{ notification.message }}</div>
              <div class="notification-time">{{ formatDate(notification.createdAt) }}</div>
            </div>
            <div v-if="!notification.read" class="unread-dot"></div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import dayjs from 'dayjs'

const router = useRouter()
const notifications = ref([])
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)

// 返回上一页
const onClickLeft = () => {
  router.back()
}

// 格式化日期
const formatDate = (date) => {
  return dayjs(date).format('YYYY-MM-DD HH:mm')
}

// 加载更多
const onLoad = async () => {
  try {
    // TODO: 调用接口获取消息列表
    // const response = await getNotifications({ page, pageSize })
    // notifications.value.push(...response.data)
    // if (response.data.length < pageSize) {
    //   finished.value = true
    // }
    loading.value = false
  } catch (error) {
    console.error('Failed to load notifications:', error)
    showToast('加载失败，请重试')
    loading.value = false
  }
}

// 下拉刷新
const onRefresh = async () => {
  try {
    // 重置状态
    finished.value = false
    notifications.value = []
    
    // 重新加载数据
    await onLoad()
    showToast('刷新成功')
  } catch (error) {
    console.error('Failed to refresh notifications:', error)
    showToast('刷新失败，请重试')
  } finally {
    refreshing.value = false
  }
}

// 点击通知
const onNotificationClick = async (notification) => {
  try {
    if (!notification.read) {
      // TODO: 调用接口标记通知为已读
      // await markNotificationAsRead(notification.id)
      notification.read = true
    }
    
    // TODO: 根据通知类型处理跳转逻辑
    if (notification.type === 'course') {
      router.push(`/course/${notification.courseId}`)
    } else if (notification.type === 'article') {
      router.push(`/article/${notification.articleId}`)
    }
  } catch (error) {
    console.error('Failed to handle notification click:', error)
    showToast('操作失败，请重试')
  }
}
</script>

<style lang="scss" scoped>
@use '@/styles/mixins.scss' as *;

.notifications-container {
  min-height: 100vh;
  background-color: #f7f8fa;
  
  .notification-list {
    padding: 12px;
  }
  
  .notification-item {
    position: relative;
    background-color: #fff;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    @include elevation(1);
    
    &:active {
      opacity: 0.7;
    }
  }
  
  .notification-content {
    .notification-title {
      font-size: 16px;
      font-weight: 500;
      color: #323233;
      margin-bottom: 8px;
    }
    
    .notification-message {
      font-size: 14px;
      color: #646566;
      margin-bottom: 8px;
      line-height: 1.5;
    }
    
    .notification-time {
      font-size: 12px;
      color: #969799;
    }
  }
  
  .unread-dot {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ee0a24;
  }
  
  .empty-state {
    padding-top: 120px;
  }
}
</style>
